<template>
  <div class="edit-food">
    <i class="fa fa-angle-left" @click="back"></i>
    <h1>编辑食品</h1>
    <form @submit.prevent="submitForm">
      <div class="form-group">
        <label for="foodName">食品名称:</label>
        <input type="text" id="foodName" v-model="food.foodName" required>
      </div>
      <div class="form-group">
        <label for="foodExplain">食品介绍:</label>
        <textarea id="foodExplain" v-model="food.foodExplain" required></textarea>
      </div>
      <div class="form-group">
        <label for="foodPrice">食品价格:</label>
        <input type="number" id="foodPrice" v-model="food.foodPrice" step="0.01" required>
      </div>
      <div class="form-group">
        <label for="foodImg">食品图片:</label>
        <div>
          <input type="text" id="foodImg" v-model="food.foodImg" required readonly>
          <button type="button" @click="triggerFileInput">选择图片</button>
          <input type="file" ref="fileInput" @change="handleFileChange" style="display: none;">
          <img v-if="food.foodImg" :src="food.foodImg" alt="食品图片" style="max-width: 100px; max-height: 100px; margin-top: 10px;">
        </div>
      </div>
      <button type="submit">更新</button>
    </form>
  </div>
</template>

<script>
export default {
  name: 'EditFood',
  data() {
    return {
      food: {
        foodId: this.$route.params.foodId,
        foodName: '',
        foodExplain: '',
        foodPrice: null,
        foodImg: '',
        businessId: this.$route.query.businessId
      }
    };
  },
  created() {
    this.business = this.$getSessionStorage('business');
    this.businessId = this.business.businessId;
    this.loadFood();
  },
  methods: {
    back() {
      this.$router.go(-1);
    },
    loadFood() {
      let url = `FoodController/getFoodById/${this.food.foodId}/${this.businessId}`;
      this.$axios.get(url).then(response => {
        this.food = response.data.result;
      }).catch(error => {
        console.error('加载食品错误:', error);
        alert('加载食品信息失败');
      });
    },
    submitForm() {
      let formData = new FormData();
      formData.append('foodId', this.food.foodId);
      formData.append('businessId', this.businessId);
      formData.append('foodName', this.food.foodName);
      formData.append('foodExplain', this.food.foodExplain);
      formData.append('foodPrice', this.food.foodPrice);
      formData.append('foodImg', this.food.foodImg);
	
	let url=`FoodController/update`;
      this.$axios.post(url, formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }).then(response => {
        if (response.data.result > 0) {
          this.$router.push({ name: 'FoodAdmin', query: { businessId: this.businessId } });
        } else {
          alert('更新食品失败');
        }
      }).catch(error => {
        console.error('更新食品错误:', error);
        alert('更新食品时发生错误');
      });
    },
    triggerFileInput() {
      this.$refs.fileInput.click();
    },
    handleFileChange() {
      const file = this.$refs.fileInput.files[0];
      if (file) {
        const reader = new FileReader();
        reader.onload = (e) => {
          this.food.foodImg = e.target.result;
        };
        reader.readAsDataURL(file);
      }
    }
  }
};
</script>

<style scoped>
.edit-food {
  max-width: 600px;
  margin: 20px auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
}
.form-group {
  margin-bottom: 15px;
}
label {
  display: block;
  margin-bottom: 5px;
}
input[type="text"],
textarea,
input[type="number"] {
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
button {
  padding: 10px 15px;
  background-color: #01B0F2;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
button:hover {
  background-color: #0286c2;
}
</style>